import './user.css'
import { useState } from "react";

export default function Enroll() {
    const [uname, setuname] = useState('')
    const [unameBlue, setunameBlue] = useState(false);
    const [unameRed, setunameRed] = useState(false);
    const [unameError, setunameError] = useState(false);

    const [tel, settel] = useState('');
    const [telError, settelError] = useState(false);
    const [telBlue, settelBlue] = useState(false);
    const [telRed, settelRed] = useState(false);

    const [password, setpassword] = useState('');
    const [passwordError, setpasswordError] = useState(false);
    const [passwordMsgShow, setpasswordMsgShow] = useState(false);
    const [passwordRed, setpasswordRed] = useState(false);

    const [setupBool,setSetupBool] = useState(true)

    // uname的input事件
    function unameInput(e) {
        setuname(e.target.value)
    }
    // uname聚焦
    function unameFocus() {
        // 蓝色边框  提示语 
        setunameBlue(true);
        // 去掉红色
        setunameRed(false);
    }
    // uname失焦
    function unameBlur() {
        // 用户名仅支持中英文、数字和下划线,且不能为纯数字

        // 如果 输入内容不为空 做验证
        if(uname){
            //验证 条件一 中 英文(a-z A-Z)和下划线  数字
            var reg = /^[a-zA-Z_\u4e00-\u9fa5\d]+$/.test(uname);
            // 条件二 不能纯数字
            var reg2 = !/^\d+$/.test(uname); 
            console.log(reg,reg2);  // 222ss

            //验证条件三 长度：   14> 汉字个数*2+字符 >7


            // 验证通过  灰色边框 + 对号
            if(reg&&reg2){
                setunameBlue(false); // 去掉蓝色 红色 边框
                setunameRed(false)
            }else{
                // 红色边框  + 下方提示文字
                setunameRed(true)
            }
        }
    }
    // 电话input事件
    function telInput(e) {
        settel(e.target.value)
    }
    // 聚焦
    function telFocus() {
        settelBlue(true)
        settelRed(false)
    }
    // 失焦
    function telBlur() {
        settelBlue(false)
        console.log(tel);
        if (!/^1[3,4,5,7,8][0-9]{9}$/.test(tel)) {
            settelError(true)
            settelRed(true)
        }
        if (/^1[3,4,5,7,8][0-9]{9}$/.test(tel) || tel == '') {
            settelError(false)
            settelRed(false)
        }
    }

    // 密码框Input事件
    function passwordInput(e) {
        setpassword(e.target.value)
    }
    // 聚焦
    function passwordFocus() {
        //获取焦点 红色边框  显示黑色提示  显示红色文字
        setpasswordRed(true);// 红色边框
        setpasswordMsgShow(true);// 黑色提示
        setpasswordError(false)// 红色文字
    }
    // 失焦
    function passwordBlur() {
        // 条件一 长度 8-14
        // let regLen = /^.{8,14}$/.test(password);
        // 条件二 字母/数字以及标点符号至少包含2种
        // 1 字母+数字  2 字母+标点  3 数字 + 标点
        // let reg1 =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,14}$/.test(password); // 字母+数字
        // let reg2 =/^(?![0-9]+$)(?![,\.\?\:\;]+$)[0-9,\.\?\:\;]{8,14}$/.test(password);  // 数字 + 标点
        // let reg3 =/^(?![a-zA-Z]+$)(?![,\.\?\:\;]+$)[a-zA-Z,\.\?\:\;]{8,14}$/.test(password);

        let reg = /(?![0-9]+$)(?![a-zA-Z]+$)(?![,\.\?\:\;]+$)([0-9a-zA-Z,\.\?\:\;]{8,14})$/.test(password)
        let regNot = /^[^\s\u4e00-\u9fa5]+$/.test(password);
        if((reg)&&regNot){
            // 验证通过
            setpasswordError(false)
            setpasswordRed(false)
            setpasswordMsgShow(false);// 黑色提示
        }else{
            // 失去焦点  显示红色文字提示
            setpasswordError(true)
        }
    }

    return (
        <div id="html">
            <div className="nav-s">
                <span>帮助中心</span> <span>|</span>
                <span>2021 @Baidu</span>
            </div>
            <h1>
                用科技
                <div>让复杂的世界更简单</div>
            </h1>
            <img src="https://passport.baidu.com/static/passpc-account/img/baidu.png" alt="" />
            <div className="app">
                <h3>欢迎注册<p className="p1">已有账号？<a href="#">登录</a></p>
                </h3>
                <form  className="form1">
                    {unameBlue && <span className="pa">设置后不可更改,中英文均可,最长14个英文或7个汉字</span>}

                    <span className='title'>用户名</span>
                    <input type="text" placeholder="请设置用户名" className={`input inp1 inputactive ${unameBlue ? 'focus' : ''} ${unameRed&&'error'} `} autoFocus value={uname} 
                    onInput={unameInput}
                    onFocus={unameFocus}
                     onBlur={unameBlur} />

                    {unameRed && <span className="pba">用户名仅支持中英文、数字和下划线,且不能为纯数字</span>}
                    <span className="span1"></span>
                </form>
                <form >
                    <span className="title">手机号</span>
                    <input type="text" placeholder="可用于登录和找回密码" 
                        onFocus={telFocus} onBlur={telBlur} className={`input inp2 ${telBlue ? 'focus' : ''} ${telRed ? 'error' : ''}`} />
                   {/* <span className="pba">手机号码格式不正确</span> */}
                </form>
                <form>
                
                       {passwordMsgShow &&  <section className="pb">
                            <p className={(password != '' && !/^.{8,14}$/.test(password)) ? 'p_error' : ''}>
                                <em>长度为8~14个字符</em>
                            </p>
                            <p className={password != '' && 
                            /^(?![0-9]+$)(?![a-zA-Z]+$)(?![,\.\?\:\;]+$)([0-9a-zA-Z,\.\?\:\;]{8,14})$/.test(password)==false  ? 'p_error' : ''}>
                                <em>字母/数字以及标点符号至少包含2种</em>
                            </p>
                            <p className={password != '' &&/^[^\s\u4e00-\u9fa5]+$/.test(password)==false? 'p_error' : ''}>
                                <em>不允许有空格、中文</em>
                            </p>
                            <span></span>
                        </section>}
                    
                    <span className="title">密码</span>
                    <input type="text" placeholder="请设置登录密码" className={`${passwordRed ? 'error' : ''} input inp3`} value={password} 
                    onInput={passwordInput}
                        onFocus={passwordFocus} onBlur={passwordBlur} />
                    {passwordError && <span className="pba" >密码设置不符合要求</span>}
                </form>
                <form action="">
                    <span className="title">验证码</span>
                    <input
                        type="text"
                        placeholder="请输入验证码"
                        className="input1 inp4" />
                    <span className="span">获取验证码</span>
                    <span className="span4">验证码不正确</span>
                </form>
                <a href="#" className="a">注册</a>
                <div className="log">
                    <input type="checkbox" />阅读并接受<span>《百度用户协议》</span>及<span>《百度隐私权保护声明》</span>
                </div>
            </div>
        </div>
    )
}